<template>
  <div>
    <van-nav-bar title="会员中心" />
    <div class="me">
      <div class="me-info">
        <div class="portrait">
          <img v-if="name" src="../../assets/toux-2.jpg" alt="" />
          <img v-else src="../../assets/toux-1.png" alt="" />
        </div>

        <span v-if="name">{{ name }}</span>
        <span v-else @click="loginRegion">立即登录</span>
        <em></em>
      </div>
    </div>
    <div class="main">
      <div class="order">
        <div>我的订单</div>
        <grid>
          <grid-item icon="photo-o" text="待付款" />
          <grid-item icon="photo-o" text="代发货" />
          <grid-item icon="photo-o" text="待收货" />
          <grid-item icon="photo-o" text="已收货" />
        </grid>
      </div>
      <div class="order">
        <grid square>
          <grid-item icon="photo-o" text="我的表单" />
          <grid-item icon="photo-o" text="我的会员卡" />
          <grid-item icon="photo-o" text="我的积分" />
          <grid-item icon="photo-o" text="我的优惠券" />
          <grid-item icon="photo-o" text="我的余额" />
          <grid-item icon="photo-o" text="我的砍价" />
          <grid-item icon="photo-o" text="推广员中心" />
          <grid-item icon="photo-o" text="收货人信息" />
          <grid-item
            v-if="name"
            icon="photo-o"
            @click="exitLogin"
            text="退出登录"
          />
        </grid>
      </div>
    </div>
  </div>
</template>

<script>
import { Grid, GridItem } from "vant";
export default {
  data() {
    return {
      name: "",
    };
  },
  components: {
    Grid,
    GridItem,
  },
  mounted() {
    this.name = localStorage.getItem("user");
  },
  methods: {
    loginRegion() {
      this.$router.push("/login");
    },
    exitLogin() {
      console.log("退出登录");
      console.log(this.name);
      this.$router.options.routes[1].children[4].meta.loginmes = false;
      this.$router.push("/home/index");
      localStorage.setItem("user", "");
      localStorage.setItem("token", "");
    },
  },
};
</script>

<style scoped>
.van-nav-bar__title {
  font-size: 18px;
  font-weight: 800;
}
.me {
  width: 100%;
  height: 150px;
  background-color: orange;
  overflow: hidden;
}
.me-info {
  width: 180px;
  position: relative;
  margin: 20px 0 0 20px;
}
.portrait {
  width: 80px;
  height: 80px;
  background-color: orange;
  margin: auto 0;
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.me span {
  display: block;
  position: absolute;
  right: 0;
  top: 40%;
  color: white;
}

.main {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgb(231, 214, 214);
}
.order {
  margin: 20px auto;
  width: 85%;
  background-color: white;
}
.order div {
  text-align: left;
}
</style>
